<template>
  <a-card 
    class="mb-8 shadow-sm"
    :body-style="{ padding: '16px' }"
    bordered="false"
  >
    <a-row :gutter="16" type="flex" justify="space-between" align="middle">
      
      <a-col :span="24" :md="12">
        <h3 class="text-lg font-semibold">{{ teamDetails.teamName }}最新帖子</h3>
        <!-- <p class="text-sm text-neutral-600">Filter and search your content easily</p> -->
      </a-col>

      <a-col :span="24" :md="12" class="flex justify-center md:justify-center space-x-3 mt-4 md:mt-0">
        <a-input-search
          :value="searchQuery"
          placeholder="Search content..."
          :enter-button="true"
          size="large"
          @search="onSearch"
          @input="onInput"
          style="width: 240px"
        />
        <a-button shape="circle" size="large" type="text">
          <template #icon>
            <FilterOutlined />
          </template>
        </a-button>
      </a-col>
    </a-row>
  </a-card>
</template>

<script setup>
import { FilterOutlined } from '@ant-design/icons-vue'
import { useTeamStore } from '@/stores/teamStore'
import { storeToRefs } from 'pinia'
const teamStore = useTeamStore()
const { teamDetails } = storeToRefs(teamStore)

const props = defineProps({
  searchQuery: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['filter-change', 'search', 'search-input'])

function onInput(e) {
  emit('search-input', e.target.value)
}
function onSearch(val) {
  emit('search', val)
}
</script>